<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!-- 浏览器分享到微信,需服务器上的图片，本地图片不行 -->
  <meta property="og:image" content="https://weekcp.oss-cn-hangzhou.aliyuncs.com/img/favicon.jpg" />
  <title>聆听延寿</title>
  <!-- 位图格式（需提供多种尺寸适配） -->
  <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <script>
    // 设计稿宽度为750px，设置1rem = 设计稿宽度的1/10（即75px）
    // 实际设备宽度 / 设计稿宽度 * 75 → 得到当前设备的1rem值
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth / 750 * 75) + 'px';
  </script>
</head>
<body>

<div class="container">
  <header class="header">
    <img class="banner-img" src="image/banner.png" alt="聆听延寿">
  </header>

  <div class="main-layout">
    <nav class="sidebar">
      <div class="tab-item active"><p></p></div>
      <div class="tab-item"><p></p></div>
      <div class="tab-item"><p></p></div>
      <div class="tab-item"><p></p></div>
      <div class="tab-item"><p></p></div>
      <div class="tab-item"><p></p></div>
    </nav>
   <!--  装饰品-花  -->
    <img src="image/img1.png" alt="" class="img_flower">
    <main class="content-area">
      <!-- 延寿寺内容 -->
      <section class="unit active">
        <div class="banner_box">
          <div class="swiper-container" id="swiper1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="image/img_yanshousi.png" alt="延寿寺" class="img_banner">
              </div>
              <div class="swiper-slide">
                <img src="image/img_yanshousi2.png" alt="延寿寺" class="img_banner">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="video">
            <img class="video_icon" src="image/video_play.png" alt="音频按钮">
            <div class="video_yp">
              <audio preload="none" loop>
                <source src="resource/yanshousi.wav" type="audio/mpeg">
                您的浏览器不支持音频播放。
              </audio>
              <img class="img_pinpu" src="image/pinpu.png" alt="音频按钮">
            </div>
            <!-- Web Audio 可视化画布 音频频谱-->
            <div class="visualizer">
              <canvas class="audio-canvas"></canvas>
            </div>
          </div>
        </div>
        <div class="msg_box">
          <img class="unit_tit" src="image/tit_yanshousi.png" alt="延寿寺">
          <div class="tags">
            <span class="tag">玉佛门下站</span>
            <span class="tag">延寿泉下饮</span>
            <span class="tag">盘龙松下行</span>
          </div>
          <div class="description">始建于辽代的寺庙，距今已有千年历史，寺中有“泉眼两松一佛门”；泉自麦饭石隙中流，四季不息；佛门向石阶高处寻，似门非门；两棵古松，一棵岁800，一棵岁500，似盘龙如舞凤；寺庙主祀清修，少事游旅，往来皆有缘之客。</div>
        </div>
      </section>

      <!-- 银山塔林内容 -->
      <section class="unit ">
        <div class="banner_box">
          <div class="swiper-container" id="swiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="image/img_yinshantalin.png" alt="银山塔林" class="img_banner">
              </div>
              <div class="swiper-slide">
                <img src="image/img_yinshantalin2.png" alt="银山塔林" class="img_banner">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="video">
            <img class="video_icon" src="image/video_play.png" alt="音频按钮">
            <div class="video_yp">
              <audio preload="none" loop>
                <source src="resource/yinshantalin.wav" type="audio/mpeg">
                您的浏览器不支持音频播放。
              </audio>
              <img class="img_pinpu" src="image/pinpu.png" alt="音频按钮">
            </div>
            <!-- Web Audio 可视化画布 音频频谱-->
            <div class="visualizer">
              <canvas class="audio-canvas"></canvas>
            </div>
          </div>
          <!-- Web Audio 可视化画布 音频频谱-->
          <div class="visualizer">
            <canvas class="audio-canvas"></canvas>
          </div>
        </div>
        <div class="msg_box">
          <img class="unit_tit" src="image/tit_yinshantalin.png" alt="银山塔林">
          <div class="tags">
            <span class="tag">最高佛觉塔</span>
            <span class="tag">最完整懿行塔</span>
            <span class="tag">穿越花海栈道，俯瞰塔林</span>
          </div>
          <div class="description">隐匿的佛国秘境，现存17座高僧的身后墓塔；因其曾作为重要的军事要塞，如铁铸屏障，又被称为“铁壁银山”；银山常静默，塔林无言语，但传奇如诗载，秋风振塔铃，说尽真消息。</div>
        </div>
      </section>

      <!-- 大杨山国家森林公园内容 -->
      <section class="unit ">
        <div class="banner_box">
          <div class="swiper-container" id="swiper3">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="image/img_dayangshan.png" alt="大杨山国家森林公园" class="img_banner">
              </div>
              <div class="swiper-slide">
                <img src="image/img_dayangshan2.png" alt="大杨山国家森林公园" class="img_banner">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="video">
            <img class="video_icon" src="image/video_play.png" alt="音频按钮">
            <div class="video_yp">
              <audio preload="none" loop>
                <source src="resource/dayangshan.mp3" type="audio/mpeg">
                您的浏览器不支持音频播放。
              </audio>
              <img class="img_pinpu" src="image/pinpu.png" alt="音频按钮">
            </div>
            <!-- Web Audio 可视化画布 音频频谱-->
            <div class="visualizer">
              <canvas class="audio-canvas"></canvas>
            </div>
          </div>
          <!-- Web Audio 可视化画布 音频频谱-->
          <div class="visualizer">
            <canvas class="audio-canvas"></canvas>
          </div>
        </div>
        <div class="msg_box">
          <img class="unit_tit" src="image/tit_dayangshan.png" alt="大杨山国家森林公园">
          <div class="tags">
            <span class="tag">寻石佛遗迹</span>
            <span class="tag">登高眺望林海</span>
            <span class="tag">徒步原始山径</span>
          </div>
          <div class="description">京北不可错过的原始林海，一方遗世独立的自然秘境；这里林海苍茫，植被繁密，是名副其实的“天然氧吧”；这里万物自在生长，鸟鸣与松涛低语，仿佛一本静待翻阅的自然之书；林中石佛寺与古塔群悠然伫立，仿佛时光的默守者，平添出一份禅意。</div>
        </div>
      </section>

      <!-- 延寿径”徒步内容 -->
      <section class="unit ">
        <div class="banner_box">
          <div class="swiper-container" id="swiper4">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="image/img_yanshoujing.png" alt="延寿径”徒步" class="img_banner">
              </div>
              <div class="swiper-slide">
                <img src="image/img_yanshoujing2.png" alt="延寿径”徒步" class="img_banner">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="video">
            <img class="video_icon" src="image/video_play.png" alt="音频按钮">
            <div class="video_yp">
              <audio preload="none" loop>
                <source src="resource/yanshoujing.wav" type="audio/mpeg">
                您的浏览器不支持音频播放。
              </audio>
              <img class="img_pinpu" src="image/pinpu.png" alt="音频按钮">
            </div>
            <!-- Web Audio 可视化画布 音频频谱-->
            <div class="visualizer">
              <canvas class="audio-canvas"></canvas>
            </div>
          </div>
        </div>
        <div class="msg_box">
          <img class="unit_tit" src="image/tit_yanshoujing.png" alt="“延寿径”徒步">
          <div class="tags">
            <span class="tag">林间轻徒步</span>
            <span class="tag">村落风情体验</span>
            <span class="tag">四季风景如画</span>
          </div>
          <div class="description">一条与自然共呼吸的山径，穿梭于林壑村落之间；步道保留原始地貌与生态脉络，诠释着“近自然、低扰动”的朴野美学；如一道温柔的线索，串联起古寺的禅意、村落的烟火与森林的呼吸；春见山花漫道，夏享浓荫遮日；秋踏落叶织毯，冬览雪覆层峦；让徒步成为一场宁静的抵达，为都市人打造可触、可感的“诗与远方”。</div>
        </div>
      </section>

      <!-- 山野骑内容 -->
      <section class="unit">
        <div class="banner_box">
          <div class="swiper-container" id="swiper_shan">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="image/img_shanyeqixing.png" alt="山野骑" class="img_banner">
              </div>
              <div class="swiper-slide">
                <img src="image/img_shanyeqixing2.png" alt="山野骑" class="img_banner">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="video">
            <img class="video_icon" src="image/video_play.png" alt="音频按钮">
            <div class="video_yp">
              <audio preload="none" loop>
                <source src="resource/qixing.wav" type="audio/mpeg">
                您的浏览器不支持音频播放。
              </audio>
              <img class="img_pinpu" src="image/pinpu.png" alt="音频按钮">
            </div>
            <!-- Web Audio 可视化画布 音频频谱-->
            <div class="visualizer">
              <canvas class="audio-canvas"></canvas>
            </div>
          </div>
        </div>
        <div class="msg_box">
          <img class="unit_tit" src="image/tit_shanyeqixing.png" alt="山野骑">
          <div class="tags">
            <span class="tag">望百路桃花山海</span>
            <span class="tag">绿氧益行路线的艺术氛围</span>
            <span class="tag">大甜心路线的山色</span>
          </div>
          <div class="description">在延寿，骑行不是赶路，是让身心与风同行；山野之间，最美环山骑行绿道望百路，以开阔弯道与起伏山势，打造流动的视觉盛宴；绿氧益行·艺览昌平骑行路段蜿蜒伸展，串联起艺术村落与森林公园，引领骑者穿林越岭、品读艺术与自然交融的静谧诗篇；满载甜蜜的大甜心路段穿梭于最具诗意的村落与山色之间，路线爬升虽颇具挑战，放坡却如御风飞行；无论何条路线，生态延寿都能让每次骑行成为自由与自然的和鸣。</div>
        </div>
      </section>

      <!-- 延寿越野内容 -->
      <section class="unit">
        <div class="banner_box">
          <div class="swiper-container" id="swiper_ye">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="image/img_yanshouyueye.png" alt="延寿越野" class="img_banner">
              </div>
              <div class="swiper-slide">
                <img src="image/img_yanshouyueye2.png" alt="延寿越野" class="img_banner">
              </div>
              <div class="swiper-slide">
                <img src="image/img_yanshouyueye3.png" alt="延寿越野" class="img_banner">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
          <div class="video">
            <img class="video_icon" src="image/video_play.png" alt="音频按钮">
            <div class="video_yp">
              <audio preload="none" loop>
                <source src="resource/yueye.mp3" type="audio/mpeg">
                您的浏览器不支持音频播放。
              </audio>
              <img class="img_pinpu" src="image/pinpu.png" alt="音频按钮">
            </div>
            <!-- Web Audio 可视化画布 音频频谱-->
            <div class="visualizer">
              <canvas class="audio-canvas"></canvas>
            </div>
          </div>
        </div>
        <div class="msg_box">
          <img class="unit_tit" src="image/tit_yanshouyueye.png" alt="延寿越野">
          <div class="tags">
            <span class="tag">享受竞速山野的激情</span>
            <span class="tag">越野赏花寻迹踏春</span>
            <span class="tag">高标准赛事服务</span>
          </div>
          <div class="description">越山追峰，用脚步谱就的越野长歌，是延寿最自由的韵律。延寿越野挑战赛，曾以“北京市体育旅游精品项目”之名，写下一个又一个关于自由与热爱的故事；暝色、映山、破晓、曙光等多元赛道如跃动的诗行，将跑者带入银山塔林的禅意、延寿寺的静谧与延寿径的朴野。无论是追寻极限的挑战者，还是享受奔跑的爱好者，都能在这里，找到自己的节奏，探索脚步与心灵的同频。</div>
        </div>
      </section>
    </main>
  </div>
</div>
<script src="./js/swiper.min.js"></script>
<script>
  const swiper1 = new Swiper('#swiper1', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction'
  });
  const swiper2 = new Swiper('#swiper2', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction'
  });
  const swiper3 = new Swiper('#swiper3', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction'
  });
  const swiper4 = new Swiper('#swiper4', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction'
  });
  const swiper = new Swiper('#swiper_shan', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction'
  });
  const swiper6 = new Swiper('#swiper_ye', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction'
  });
</script>
<script>
  $(document).ready(function() {
    // 标签页切换功能 - 使用事件委托确保点击p标签也能触发
    $('.sidebar').on('click', '.tab-item', function(){
      console.log('点击了标签页')
      // 停止所有正在播放的音频并复位UI
      $('audio').each(function(){
        try {
          this.pause();
          this.currentTime = 0;
        } catch(e) {}
      });
      // 重置播放按钮图标
      $('.video_icon').attr('src', 'image/video_play.png');
      // 显示占位频谱图
      $('.video_yp .img_pinpu').show();
      // 停止可视化动画并清空画布
      try { stopVisualizer(); } catch(e) {}
      $('.audio-canvas').each(function(){
        const c = this;
        const ctx = c.getContext && c.getContext('2d');
        if (ctx) {
          ctx.clearRect(0, 0, c.width || 0, c.height || 0);
        }
      });
      // 移除所有活动状态
      $(this).addClass('active').siblings().removeClass('active');
      $('.content-area .unit').eq($(this).index()).css('right', 0).siblings('.unit').css('right','-150%')
      
      // 滚动到content-area顶部
      $('.content-area').scrollTop(0);
    });
    
    // 音频播放功能
    $('.video_yp').on('click', function(){
      let audio = $(this).find('audio')[0];
      let icon = $(this).siblings('.video_icon');
      let canvas = $(this).siblings('.visualizer').find('.audio-canvas')[0];
      const iconPinpu = $(this).find('.img_pinpu');
      
      if (audio.paused) {
        audio.play();
        iconPinpu.hide();
        icon.attr('src', 'image/video_stop.png');
        unlockAndStartVisualizer(audio, canvas);
        // 播放结束时复位
        audio.onended = function() {
          icon.attr('src', 'image/video_play.png');
          stopVisualizer();
          iconPinpu.show();
        };
      } else {
        audio.pause();
        icon.attr('src', 'image/video_play.png');
        stopVisualizer(audio);
      }
    });
    
    // 频谱动画控制
    // Web Audio 可视化
    let audioContext = null;
    let analyserNode = null;
    let sourceNode = null;
    let rafId = null;
    let dataArray = null;
    let bufferLength = 0;
    let currentAudioEl = null;
    // 缓存：同一 HTMLMediaElement 只能 createMediaElementSource 一次，后续需复用
    const audioElToSourceNode = new WeakMap();

    function unlockAudioContext() {
      if (!audioContext) {
        const Ctx = window.AudioContext || window.webkitAudioContext;
        audioContext = new Ctx();
      }
      if (audioContext.state === 'suspended') {
        return audioContext.resume();
      }
      return Promise.resolve();
    }

    function createOrReuseSource(audioEl) {
      if (currentAudioEl === audioEl && sourceNode) {
        return;
      }
      currentAudioEl = audioEl;
      if (!analyserNode) {
        analyserNode = audioContext.createAnalyser();
        analyserNode.fftSize = 2048;
        analyserNode.minDecibels = -90;
        analyserNode.maxDecibels = -10;
        analyserNode.smoothingTimeConstant = 0.85;
        try { analyserNode.connect(audioContext.destination); } catch(e) {}
      }
      // 复用或创建并缓存 sourceNode
      const cached = audioElToSourceNode.get(audioEl);
      if (cached) {
        sourceNode = cached;
      } else {
        try {
          sourceNode = audioContext.createMediaElementSource(audioEl);
          audioElToSourceNode.set(audioEl, sourceNode);
        } catch (err) {
          // 如果已被创建过但未缓存（如热更新场景），直接尝试复用现有缓存（无可用则放弃可视化）
          sourceNode = cached || null;
        }
      }
      if (sourceNode) {
        try { sourceNode.disconnect(); } catch(e) {}
        try { sourceNode.connect(analyserNode); } catch(e) {}
      }
      bufferLength = analyserNode.frequencyBinCount;
      dataArray = new Uint8Array(bufferLength);
    }

    function drawFrequencyBars(ctx, width, height) {
      analyserNode.getByteFrequencyData(dataArray);
      ctx.clearRect(0, 0, width, height);
      const minBarWidth = 2; // 允许更细以容纳更多柱条
      const gap = 1;
      let baseCount = Math.floor((width + gap) / (minBarWidth + gap));
      baseCount = Math.max(3, Math.min(baseCount, bufferLength));
      let barCount = Math.min(bufferLength, baseCount * 2); // 数量翻倍
      const step = Math.max(1, Math.floor(bufferLength / barCount));
      const barWidth = Math.max(minBarWidth, Math.floor((width - (barCount - 1) * gap) / barCount));
      for (let i = 0; i < barCount; i++) {
        const v = dataArray[i * step] / 255;
        const barHeight = v * height;
        const x = i * (barWidth + gap);
        const y = (height - barHeight) / 2; // 垂直居中绘制
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
        ctx.fillRect(x, y, barWidth, barHeight);
      }
    }

    function resizeCanvasForHiDpi(canvas) {
      const dpr = window.devicePixelRatio || 1;
      const rect = canvas.getBoundingClientRect();
      if (canvas.width !== Math.round(rect.width * dpr) || canvas.height !== Math.round(rect.height * dpr)) {
        canvas.width = Math.round(rect.width * dpr);
        canvas.height = Math.round(rect.height * dpr);
      }
      const ctx = canvas.getContext('2d');
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      return ctx;
    }

    function renderLoop(canvas) {
      if (!analyserNode) return;
      const ctx = resizeCanvasForHiDpi(canvas);
      const rect = canvas.getBoundingClientRect();
      drawFrequencyBars(ctx, rect.width, rect.height);
      rafId = requestAnimationFrame(() => renderLoop(canvas));
    }

    function unlockAndStartVisualizer(audioEl, canvas) {
      unlockAudioContext().then(() => {
        createOrReuseSource(audioEl);
        cancelAnimationFrame(rafId);
        renderLoop(canvas);
      }).catch(() => {});
    }

    function stopVisualizer() {
      cancelAnimationFrame(rafId);
      rafId = null;
    }
  });
</script>
</body>
</html>